<template>
  <div class="wrap">
    <img
      src="@/assets/dele/shopBg.png"
      alt=""
      class="banner"
      v-if="!resUserInfo.userBannerImg"
      @look="look('@/assets/dele/shopBg.png')"
    />
    <img :src="$imgUrl + resUserInfo.userBannerImg" alt="" class="banner" v-else  @click="look($imgUrl + resUserInfo.userBannerImg)"/>
    <div class="attention" @click="changeAttion">{{ isAttention ? "取消关注" : "关注" }}</div>
    <div class="mainWrap">
      <div class="topInfoWrap">
        <div class="headInfoWrap">
          <img
            :src="$imgUrl + resUserInfo.headImage"
            alt=""
            class="headImg"
            @click="look($imgUrl + resUserInfo.headImage)"
          />
        </div>
        <div class="nameLeft">
          <div class="name">
            <em class="nameText">{{ resUserInfo.nickName }}</em>
            <img src="@/assets/sex.png" alt="" class="sex" v-if="resUserInfo.sex == 0" />
            <img src="@/assets/sex2.png" alt="" class="sex" v-if="resUserInfo.sex == 1" />
            <em class="ID">ID:{{ resUserInfo.id }}</em>
          </div>
          <div class="school">{{ resUserInfo.schoolName }}</div>
        </div>
        
      </div>
      <div class="countStatics">
        <div class="item">
          <em class="bigFont">{{ resUserInfo.followNum }}</em>
          关注
        </div>
        <div class="item">
          <em>{{ resUserInfo.fansNum }}</em>
          粉丝
        </div>
      </div>
      <div style="height: 5px; background-color: #f2f4fa; width: 100%"></div>
      <div class="title">TA的帖子</div>
      <div class="container" v-if="userPublishList.length>0">
        <div v-for="(item, index) in userPublishList" :key="index">
          <div class="left" v-if="index % 2 == 0">
            <div class="item" @click="jumpForumInfo(item.id)">
              <img :src="$imgUrl + item.imageUrl[0]" alt="" class="forunmImg" />
              <div class="forumUserList">
                <div class="forumTitle">
                  {{ item.content }}
                </div>
                <div class="forumBottom">
                  <div class="forumLeft">
                    <img :src="$imgUrl + item.headImage" alt="" class="userHead" />
                    <em class="userName">{{ item.nickName }}</em>
                  </div>
                  <div class="forumRight">
                    <img
                      src="@/assets/redHeart.png"
                      alt=""
                      class="redHeart"
                      style="display: none"
                    />
                    <img src="@/assets/greyHeart.png" alt="" class="redHeart" />
                    <em class="loveNumber">{{ item.likeNum }}</em>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="right" v-else>
            <div class="item" @click="jumpForumInfo(item.id)">
              <img :src="$imgUrl + item.imageUrl[0]" alt="" class="forunmImg" />
              <div class="forumUserList">
                <div class="forumTitle">
                  {{ item.content }}
                </div>
                <div class="forumBottom">
                  <div class="forumLeft">
                    <img :src="$imgUrl + item.headImage" alt="" class="userHead" />
                    <em class="userName">{{ item.nickName }}</em>
                  </div>
                  <div class="forumRight">
                    <img
                      src="@/assets/redHeart.png"
                      alt=""
                      class="redHeart"
                      style="display: none"
                    />
                    <img src="@/assets/greyHeart.png" alt="" class="redHeart" />
                    <em class="loveNumber">{{ item.likeNum }}</em>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-else style="font-size:12px;color:#181818;margin-left:15px;margin-top:20px;">暂无帖子...</div>
    </div>
  </div>
</template>

<script>
import { Switch ,ImagePreview} from "vant";
import {
  apiUserPublishList,
  apiGetAppUserInfoById,
  apiCancel,
  apiAdd,
  apiRelation,
} from "@/request/api"; // api接口
export default {
  name: "App",
  data() {
    return {
      reqId: this.$route.query.userId, //用户id
      resUserInfo: "",
      userPublishList: [],
      isAttention: "", //是否关注用户
      reqpageSize: 5, //分页条数
      reqPageNum: 0, //当前第几页
      noMore:false,
    };
  },
  mounted() {
    document.querySelector("body").setAttribute("style", "background-color:#fff");
    window.addEventListener("scroll", this.handleScroll, true);
    this.deleReply();
    this.getUserPublishList();
    this.getRelation();
  },
  methods: {
    // 查看图片
    look(img){
    ImagePreview([img]);
    },
    //分页 监听滑动事件
    handleScroll() {
      let Top = $(window).scrollTop();
      let WinH = $(window).height();
      let DocH = $(document).height();
      if (DocH - (Top + WinH) <= 0) {
        if (this.noMore) {
          return;
        }
        this.noMore = false;
        this.getUserPublishList();
      }
    },
    //获取用户信息
    deleReply() {
      apiGetAppUserInfoById({
        id: this.reqId,
      }).then((res) => {
        this.resUserInfo = res.data;
        console.log("resUserInfo", this.resUserInfo);
      });
    },
    //获取用户发帖列表
    getUserPublishList() {
      var page = (this.reqPageNum += 1);
      apiUserPublishList({
        id: this.reqId,
        pageNum: page,
        pageSize: this.reqpageSize,
      }).then((res) => {
        if (res.data.rows.length === 0) {
          this.noMore = true;
          return;
        }
        var dataRes = res.data.rows;
        dataRes.map((item) => {
          item.imageUrl = item.imageUrl.split(",");
        });
        this.userPublishList.push(...dataRes);
        console.log("userPublishList", this.userPublishList);
      });
    },
    //是否关注用户：
    getRelation() {
      apiRelation({
        id: this.reqId,
      }).then((res) => {
        console.log("是否关注", res.data);
        this.isAttention = res.data;
      });
    },
    //取消关注
    getCancel() {
      apiCancel({
        toUserId: this.reqId,
      }).then((res) => {
        this.getRelation();
      });
    },
    //关注
    getAdd() {
      apiAdd({
        toUserId: this.reqId,
      }).then((res) => {
        this.getRelation();
      });
    },
    // 切换关注or取消关注的状态：
    changeAttion() {
      if (this.isAttention) {
        //当前是关注状态 操作为取消关注
        this.getCancel();
      } else {
        this.getAdd();
      }
    },
    //跳转设置个人信息：
    jumpPersonalData() {
      // this.$router.push({
      //   path: "/pages/personalData",
      //   query: {
      //     //传递参数
      //   },
      // });
    },
    //跳转帖子详情
    jumpForumInfo(i) {
      this.$router.push({
        path: "/pages/forumInfo",
        query: {
          //传递参数
          forumId:i
        },
      });
    },
  },
  created() {},
  components: {
    [Switch.name]: Switch,
     [ImagePreview.Component.name]: ImagePreview.Component,
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.banner {
  width: 100%;
  height: 220px;
}
.mainWrap {
  position: absolute;
  top: 180px;
  background: #fafbfc;
  border-radius: 20px;
  width: 100vw;
}
.topInfoWrap {
  overflow: hidden;
  width: 95%;
  margin: 18px auto;
}
.headInfoWrap {
  width: 70px;
  height: 70px;
  border: 2px solid #f48f5b;
  border-radius: 70px;
  float: left;
}
.headImg {
  width: 100%;
  height: 100%;
  border-radius: 70px;
}
.nameLeft {
  float: left;
  margin-left: 15px;
}
.name {
  font-size: 15px;
  font-weight: 600;
  color: #181818;
  margin-top: 13px;
}
.nameText {
}
.sex {
  width: 12px;
  height: 12px;
  margin: 0px 5px;
}
.ID {
  font-size: 10px;
  font-weight: 300;
  color: #999999;
}
.school {
  height: 20px;
  line-height: 20px;
  border: 1px solid #000000;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 400;
  color: #181818;
  text-align: center;
  margin-top: 10px;
}
.attention {
  /* float: right; */
  /* width: 80px; */
  /* height: 33px; */
  /* line-height: 33px; */
  padding: 5px 15px;
  background: #181818;
  border-radius: 17px;
  font-size: 13px;
  font-weight: 500;
  color: #ffffff;
  text-align: center;
  margin-top: 25px;
  position: fixed;
  top: 0;
  right: 10px;
}
.countStatics {
  width: 95%;
  margin: 0 auto;
  font-size: 12px;
  font-weight: 500;
  color: #181818;
  height: 35px;
}
.item {
  float: left;
  margin-right: 21px;
}
.bigFont {
  font-size: 15px;
}
.title {
  width: 95%;
  margin: 15px auto;
  font-size: 13px;
  font-weight: 600;
  color: #181818;
}
.container {
  width: 93%;
  margin: 0px auto;
}
.left {
  float: left;
  width: 49%;
}
.item {
  margin-bottom: 20px;
}
.forunmImg {
  width: 167px;
  height: auto;
}
.forumUserList {
}
.forumTitle {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 500;
  color: #181818;
  line-height: 18px;
  display: -webkit-box;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.forumBottom {
  display: flex;
  justify-content: space-between;
}
.forumLeft {
  display: flex;
}
.userHead {
  width: 19px;
  height: 19px;
  border-radius: 19px;
  align-items: center;
}
.userName {
  font-size: 10px;
  font-weight: 300;
  color: #666666;
  margin-left: 5px;
  margin-top: 2px;
}
.forumRight {
}
.redHeart {
  width: 13px;
  height: 11px;
}
.loveNumber {
  font-size: 10px;
  font-weight: 300;
  color: #666666;
}
.right {
  width: 49%;
  float: right;
}
</style>
